import { useState } from 'react'
import { Tabs } from 'antd'
import TableView from './TabelView'
import SourceView from './SourceView'
import useStore from '../../../store/appStore'
import './index.less'

export default function PanelView() {

    const activeTab = useStore(state => state.editor.activeTab)
    const setEditorActiveTab = useStore(state => state.setEditorActiveTab)

    const sourceData = {
        name: '张三',
        age: 18,
        gender: '男'
    }

    const [tableData, setTableData] = useState(sourceData)
    return (
        <div className="panel-view">
            <Tabs
                className='panel-view-tabs'
                onChange={(key) => setEditorActiveTab(key as 'table_view' | 'source_view')}
                activeKey={activeTab}
                items={[{
                    key: 'table_view',
                    label: '列表视图',
                    children: <TableView />
                }, {
                    key: 'source_view',
                    label: '源码视图（JSON）',
                    children: <SourceView data={tableData} />
                }]}
            />
        </div>
    )
}
